<template>
  <div>
    <el-tabs tab-position="left" v-model="tabsName" @tab-click="handlTabs"
      v-if="conditionsInve&&conditionsInve.length > 0">
      <el-tab-pane v-for="(item) in conditionsInve[tabsIndex].conditions" :key="item.name"
        :label="item.label" :name="item.name">
      </el-tab-pane>

      <el-checkbox-group v-model="checkListData.list" :disabled="stability"
        v-if=" conditionsInve[tabsIndex].conditions.length > 0"
        @change="(val)=>{handlGroupTabs(val)}">
        <ul class="ul" v-if="checkListData.conditionsList">
          <li v-for="(ite,idex) in checkListData.conditionsList" :key="idex">
            <el-checkbox :label="ite.place_conditions.id">
              {{ite.place_conditions.place_conditions_name}}
            </el-checkbox>
          </li>
        </ul>
      </el-checkbox-group>

    </el-tabs>
  </div>
</template>

<script>
import { placeConditions } from "@/api/stability/giveUp";

export default {
  name: "conditions",
  props: {
    conditionsInve: {
      type: Array,
      default: function() {
        return [];
      }
    },
    tabsIndex: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    stability: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    aa: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      checkListData: {
        list: [],
        index: ""
      },
      tabsName: "aa",
      placeConditionsList: [],
      inspect_types: []
    };
  },
  //是计算属性，也可以理解为一个方法。
  computed: {},

  //属性是手动定义的所需监听的值
  watch: {
    tabsIndex: {
      handler: function(newValue, oldValue) {
        let a = this.conditionsInve[newValue].conditions[0];
        if (a) {
          this.tabsName = a.name;
          this.handlTabs(a);
        }
      },
      deep: true
    },

    aa: {
      handler: function(newValue, oldValue) {
        this.tabsName = newValue.name;
        this.handlTabs(newValue);
      }
    },

    conditionsInve: {
      handler: function(newV, oldV) {},
      deep: true
    }
  },

  //生命周期 - 创建完成（访问当前this实例）
  created() {},

  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},

  //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
  methods: {
    handlPace() {
      placeConditions(this.checkListData.name).then(res => {
        if (res.code === 200) {
          this.$set(this.checkListData, "conditionsList", res.data);
        }
      });
    },
    //放置放置条件tab
    async handlTabs(val) {
      if (this.conditionsInve.length === 0) return;
      let conditions = this.conditionsInve[this.tabsIndex].conditions;
      let inspect_types = this.conditionsInve[this.tabsIndex].inspect_types;
      let index = conditions.findIndex(a => a.name == val.name);
      if (index !== -1) {
        let data = conditions[index];
        this.checkListData = data;
        if (!this.checkListData.conditionsList) {
          this.handlPace();
        }
      }

      let inde = inspect_types.findIndex(a => a.inspect_type.id == val.name);
      if (inde !== -1) {
        this.inspect_types = inspect_types;
      }
      this.tabsName = val.name;
    },

    //放置放置条件多选
    handlGroupTabs: function(val) {
      this.checkListData.list = val;
      let arr = [],
        bbb = [],
        ccc = [];
      for (let i = 0; i < val.length; i++) {
        let index1 = this.checkListData.conditionsList.findIndex(
          a => a.place_conditions.id == val[i]
        );
        if (index1 !== -1) {
          arr.push({
            place_conditions: this.checkListData.conditionsList[index1]
              .place_conditions,
            sample_point: this.checkListData.conditionsList[index1].sample_point
          });
          ccc.push({
            label: this.checkListData.conditionsList[index1].place_conditions
              .place_conditions_name,
            name: val[i]
          });
        }
      }
      bbb = [...new Set(arr)];
      ccc = [...new Set(ccc)];
      this.checkListData.conditions = ccc;
      let ind = this.inspect_types.findIndex(
        a => a.inspect_type.id == this.tabsName
      );
      if (ind !== -1) {
        this.inspect_types[ind].place_conditions_infos = bbb;
      }
      this.$emit("sucessTab", this.tabsName);
    }
  }
};
</script>

<style scoped>
/* @import url(); 引入css类 */
.ul {
  margin: 0;
  padding: 0;
}

.ul li {
  height: 30px;
  line-height: 30px;
}

.ul li:hover {
  background-color: rgb(248, 248, 248);
  cursor: pointer;
}

.el-card {
  height: 260px;
}

::v-deep .el-tabs__item {
  width: 130px;
  text-align: center !important;
}
</style>
